<template>
  <div class="tool-complex tool-layout">
    <div class="tool-layout-column" v-for="column in columnNumber" :key="column">
      <div class="tool-layout-row" v-for="row in rowNumber" :key="row"></div>
    </div>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-layout",
  mixins: [mixins],
  data() {
    return {
      attr: {
        column: 3,
        row: 2,
      },
    };
  },
  computed: {
    columnNumber() {
      return this.attr.column >= 1 ? this.attr.column : 1;
    },
    rowNumber() {
      return this.attr.row >= 1 ? this.attr.row : 1;
    },
  },
  pageData: {
    version: "0.0.1",
    name: "tool-layout",
    title: "栅格",
    count: 0,
    width: 500, // 默认宽高
    height: 400,
    config: {
      label: "栅格",
      active: [],
      attr: [
        {
          key: "column", // 属性
          title: "行数", // 属性名
          formType: "text-number",
          group: "basics",
          type: "String",
          data: 3, // 属性值
        },
        {
          key: "row",
          title: "列",
          formType: "text-number",
          group: "basics",
          type: "Number",
          data: 2,
        },
      ],
    },
  },
};
</script>

<style scoped>
.tool-complex {
  width: 100%;
  height: 100%;
  transition: all 0.58s;
}

.tool-layout {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tool-layout-column {
  width: 100%;
  flex: 1;
  border: 1px solid #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tool-layout-row {
  flex: 1;
  height: 100%;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}
</style>
